<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            height: 400px;
            background-color: rgb(187, 180, 180);
            margin: 100px auto;
            border-radius: 20px;
            text-align: center;
        }
        input{
            width: 60%;
            height: 30px;
            outline: none;
            border-radius: 5px;
            border: none;
        }
        .from{
            width: 80%;
            height: 50px;
            margin: auto;
            border-bottom: 1px solid;
        }
        button{
            margin-top: 40px;
            width: 20%;
            border-radius: 10px;
            font-size: 20px;
            background-color: rgb(168, 179, 168);
            color: honeydew;
        }
    .d{
        height:70px;
        align-items:center;
        margin:auto;
        padding-top:30px;
        justify-content: space-between;
    }
    p{
        font-size:10px;
        color:red;
    }

    </style>
    <script src="./jquery3.5.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="from">
            表单
        </div>
        <div class="d">
            <input class="ipt" type="text" onblur="checkName()"  placeholder="请输入你的名字"/>
            <p class="p1"></p>
        </div>
        <div  class="f">
            <input class="ipt2" type="password" onblur="checkPassword()" placeholder="请输入你的密码"/>
            <p class="p2"></p>
        </div>
            <button class="btn" disabled>登录</button>
    </div>

    <script>
//     $( ".ipt" ).bind( "blur", function() {
//         // this.value.length = this.value.length < 4 || this.value.length > 16 ? 
//         //  $('<div>用户名输入错误，4到16位，字母，数字，下划线，减号</div>').appendTo( $(".d") ) :
//         //  this.value.length
//     if( this.value.length < 4 || this.value.length > 16) {
//         // $('.btn').css("disabled","false")
//         console.log($( ".ipt" ).val());
//         $(".d").css({
//             fontSize:"10px",
//             color:'red'
//         })
//         $('<div>用户名输入错误，4到16位，字母，数字，下划线，减号</div>').appendTo( $(".d") );
//     }else{
       
//     }
// } );    

// $( ".ipt2" ).bind( "blur", function() {
//     if( this.value.length < 4 || this.value.length > 16) {
//         console.log($( ".ipt" ).val());
//         $(".f").css({
//             fontSize:"10px",
//             color:'red'
//         })
//         $('<div>密码输入错误，4到16位，字母，数字，下划线，减号</div>').appendTo( $(".f") );
//     }
// } );

 let nameEle = document.querySelector('.ipt')
 let password = document.querySelector('.ipt2');
 let btn = document.querySelector('button')
 let p1 = document.querySelector('p1')
 let p2 = document.querySelector('p2')
let flag1 = false
let flag2 = false

 function checkName(){
    let name = nameEle.value.length;
    console.log('name==>',name);
    if(name < 4 || name > 16){
        p1.innerHTML = '用户名输入错误，4到16位，字母，数字，下划线，减号'
        name++;
    }else{
        p1.innerHTML =' '
        flag1=true;
    }
 }
 function checkPassword(){
    let name = nameEle.value.length;
    console.log('name==>',name);
    if(name < 8 || name > 15){
        p2.innerHTML = '密码输入错误，4到16位，字母，数字，下划线，减号'
    }
    else{
        p2.innerHTML =' '
        flag1=true;
    }
 }
 function checkBtn() {
     if(flag1 == true ||flag2 == true){
         btn.style.disabled = true
     }
 }

    </script>
</body>

</html>